<script setup>
import { ref, reactive, onMounted } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import BusinessAdd from "./BusinessAdd/index.vue"
import BusinessEdit from "./BusinessEdit/index.vue"
const bWrap = ref()
const height = ref(0)
const params = reactive({
  state: "",
  business: ""
})
const businessAddVisiable = ref(false)
const businessEditVisiable = ref(false)
const chooseBusiness = reactive({ value: {} })
const stateOptions = ref([
  {
    value: '0',
    label: '正常'
  },
  {
    value: '1',
    label: "停止"
  }
])
const tableData = ref([
  {
    id: 1,
    businessName: '果塘湖农贸市场',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "15823101358",
    taken: "2000",
    state: "0",
    address: "重庆市渝北区果塘路9号", // 地址
    bank: '重庆农商行', // 开户银行
    bankAccount: '8757757878789', //银行账户
    bankAccountName: "姚志农", // 银行户名
    descript: "", //描述
  },
  {
    id: 2,
    businessName: '渝佰滋味',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "89132911",
    taken: "2000",
    state: "1",
    address: "重庆市江北区石马河街道玉带山200号", // 地址
    bank: '农业银行', // 开户银行
    bankAccount: '453545467675777575', //银行账户
    bankAccountName: "沈渝", // 银行户名
    descript: "", //描述
  },
  {
    id: 3,
    businessName: '鲜丰水果',
    cargoNum: 3,
    saled: '500',
    saledMoney: '4000',
    loginName: "19936307460",
    taken: "2000",
    state: "0",
    address: "重庆市沙坪坝区虎溪街道大学城西路29号附16号", // 地址
    bank: '工商银行', // 开户银行
    bankAccount: '3039820928920920', //银行账户
    bankAccountName: "张鲜丰", // 银行户名
    descript: "", //描述
  },
])
onMounted(() => {
  height.value = bWrap.value.offsetHeight - 52 - 20
})

const gotoAdd = () => {
  // router.push({ name: "cargoAdd" })
  businessAddVisiable.value = true
}

const gotoEdit = (row) => {
  chooseBusiness.value = row
  businessEditVisiable.value = true
}

const resetPass = (row) => {
  ElMessageBox.confirm('是否重置账号' + row.loginName + '的密码', '重置密码', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    ElMessage.success('已重置密码')
  }).catch(() => {
    ElMessage.info('已取消')
  })
}

const stopAccount = row => {
  ElMessageBox.confirm('是否停止账号' + row.loginName, '停止用户', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    ElMessage.success('已停止该用户')
  }).catch(() => {
    ElMessage.info('已取消')
  })
}
</script>

<template>
  <div class="b-wrap" ref="bWrap">
    <div class="search">
      <el-input v-model="params.business" style="width: 180px;margin-right: 10px" placeholder="请输入商家名称" clearable />
      <el-select v-model="params.state" placeholder="请选择状态" style="width: 180px;margin-right: 10px" clearable>
        <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="primary">查询</el-button>
      <el-button @click="gotoAdd">添加</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%" :height="height">
        <el-table-column prop="businessName" label="商家名称" width="180" />
        <el-table-column prop="cargoNum" label="商品数" width="180" />
        <el-table-column prop="saled" label="已出售数" />
        <el-table-column prop="saledMoney" label="销售额(金额)" width="180" />
        <el-table-column prop="loginName" label="账号" width="180" />
        <el-table-column prop="taken" label="已领取(金额)" width="180" />
        <el-table-column prop="state" label="状态" width="180">
          <template #default="scope">
            <el-tag :type="scope.row.state === '0' ? 'primary' : 'info'" effect="dark">
              {{ stateOptions.find(so => so.value === scope.row.state).label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="gotoEdit(scope.row)">
              修改
            </el-button>
            <el-button link type="primary" size="small" @click="resetPass(scope.row)">重置密码</el-button>
            <el-button link type="primary" size="small" @click="stopAccount(scope.row)">停止</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <BusinessAdd :visiable="businessAddVisiable" @close="businessAddVisiable = false" />
  <BusinessEdit :visiable="businessEditVisiable" :choose="chooseBusiness.value" @close="businessEditVisiable = false" />
</template>

<style scoped>
.b-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
}

.search {
  padding: 10px;
}

.table {
  margin: 0 10px;
}
</style>